<template>
  <view class="IncomeStatistics tn-p">
    <box title="收入统计">
      <tn-collapse :modelValue="currentCollapse" @change="handleChange"  >
        <tn-collapse-item v-for="(item, index) in dataList" :key="index"  :title="item.name" :disabled="item.type != 1">
          <template #title >
            <view class="tn-flex  justify-between">
              <view class="tn-flex tn-align-center ">
                <tn-icon :name="item.icon" :color="item.color" size="40" />
                <text>{{ item.name }}</text>
              </view>
               <view class="tn-flex  ">
                <text v-if="item.type == '1'" class="tn-text-right">￥{{ item.money }} <tn-icon :name="expanded ? 'arrow-up' : 'arrow-down'" /></text>
                <text v-else class="tn-text-right">{{ item.num }}</text>
              </view>  
            </view>
          </template>
          <view v-for="(child, childIndex) in item.children" :key="childIndex" class="tn-flex tn-mt-sm justify-between ">
            <view class="tn-flex-1 tn-text-left">{{ child.title.substring(child.title.lastIndexOf('-')+1) }}</view>
            <view class="tn-flex-1 tn-text-right">￥{{ child.amountActuallyPaid }}</view>
          </view>
        </tn-collapse-item>
      </tn-collapse>
    </box>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from "vue";
// 事件传递
const emit = defineEmits(["change"]);

const handleChange = (index: any) => { 
  console.log('change value=>', index);
  emit('change', index);
};

const props = defineProps({

  dataList: Array,
  currentCollapse : Number
});
</script>

<style lang="scss" scoped>
 
</style>
